<template>
    <div class="right-radius" id="RightRadius">
        <img :style="{'background':backround,'width':width,'height':height}" class="user-header" v-lazy="img" alt="">
        <p class="userheader-text">{{text}}</p>
    </div>
</template>

<script>
    export default {
        name: "bord",
        props:{
            styles:Object
        },
        data(){
            return{
                backroundColor:'rgba(0,0,0,.5)',
                img:'',
                width:'.5rem',
                height:'.5rem',
                text:'帮我打气,100能当10450'
            }
        },
        mounted(){
            if(Object.keys(this.styles).keys >= 0){
                if(this.Object.backroundColor){
                    this.backroundColor = this.Object.backroundColor;
                }
                if(this.Object.img){
                    this.img = this.Object.img;
                }
                if(this.Object.width){
                    this.width = this.Object.width;
                    this.height = this.Object.height;
                }
                if(this.Object.text){
                    this.text = this.Object.text;
                }
            }

        },
        methods:{
        }
    }
</script>

<style scoped>
    .right-radius{
        position: relative;
        padding: .02rem .05rem;
    }
    .user-header{
        border-right-top-radius: 50%;
        border-right-bottom-radius: 50%;
    }
    .userheader-text{
        color:#fff;
        font-size: .12rem;
    }
</style>